<template>
	<view>
		<!--#ifdef APP-PLUS -->
		<uni-nav-bar :statusBar="true" left-icon="arrowleft" @clickLeft="navBack" @clickRight="submit" rightText="发布">
			<!--  #endif -->
			<!--  #ifdef MP -->
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" @clickRight="submit" rightText="发布">

				<!--  #endif -->
				<view style="margin: 0 auto;" class="f-ajc" @tap="selectPriv">
					<view>
						{{topInfo}}
					</view>
					<view class="iconfont icon-down">
					</view>
				</view>
			</uni-nav-bar>
			<view class="uni-textarea">
				<textarea v-model="info" placeholder="发你想说的~" />
				</view>
			<select-image :imageList="picList" @loadImgs="fetchImages"></select-image>
			<uni-popup ref="popup" :animation="true" type="center" :maskClick="true">
					<view class="pp-warp">
						<image class="pp-image" src="../../static/test/banner2.jpg" mode="aspectFill"></image>
						<view class="pp-info f-ajc">啊是多久啊看来是京东卡就是</view>
						<view class="pp-info f-ajc">啊实打实大苏打倒萨十大很艰苦环境</view>
						<view class="pp-info f-ajc">健康垃圾大咖说阿达是健康大使</view>
						<button class="pp-button" type="default" @tap="closePopup">知道啦~</button> 
					</view>
			</uni-popup>
	</view>
</template>

<script>
	const privacy = ["对所有人公开","仅自己可看"]
	import UniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import selectImage from "../../components/selectimage.vue"
	import UniPopup from "../../components/uni-popup/uni-popup.vue"
	export default {
		data() { 
			return {
				priv: 0,
				info: "",
				picList: [],
			}
		},
		computed:{
			topInfo(){
				return privacy[this.priv]
			}
		},
		onBackPress() { 
			this.back()
			return false
		},
		watch:{
			info(v){
				this.showMask = false; 
			},
			picList(v) {
				this.showMask = false; 
			}
		},
		methods: {
			closePopup(){
				this.$refs['popup'].close()
			},
			submit(){
				console.log("提交")
			},
			fetchImages(imageList){
				this.picList = imageList
				console.log(this.picList)
			},
			selectPriv(){
				uni.showActionSheet({
				    itemList: privacy,
				    success:(res) =>  {
				        this.priv = res.tapIndex
				    }
				});
			},
			// #ifdef APP-PLUS
			navBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			// #endif
			back(){
				 if(this.showMask) {
						  //  #ifdef MP
						  uni.navigateBack({
							delta: 1
						  });
						  // #endif
				}else{
					if(this.info.trim().length == 0 && this.picList.length == 0) {
						//  #ifdef MP
						uni.navigateBack({
							delta: 1
						});
						// #endif
					}else{
						this.showMask = true
						uni.showModal({
							content: '你是否要保存你的瞬间',
							cancelText: '不保存',
							confirmText: '保存',
							success:  (res)  => {
								if (res.confirm) {
									uni.setStorage({
									    key: 'fabu_cache',
									    data: {priv: this.priv,info: this.info,picList: this.picList},
									    success: function () {
									        // console.log('缓存数据成功');
											//  #ifdef MP
											uni.navigateBack({
												delta: 1
											});
											// #endif
									    }
									});
								} else if (res.cancel) {
									uni.removeStorage({
									    key: 'fabu_cache',
									    success: function (res) {
									        // console.log('清除缓存数据成功');
											//  #ifdef MP
												uni.navigateBack({
													delta: 1
												});
												// #endif
											
									    }
									});
								}
							}
						});
					}
				}
			}
			// 
			// 
		},
		onLoad() {
			uni.getStorage({
			    key: 'fabu_cache',
			    success:  ({data}) => {
					this.priv = data.priv;
					this.info = data.info;
					this.picList = data.picList;
			    }
			});
		},
		onShow() {
			this.$nextTick(() => {
				// this.$refs['popup'].open()
				// console.log((this.$refs['popup'].open))
			});
		},
		components:{
			UniNavBar,
			selectImage,
			UniPopup
		}
	}
</script>

<style scoped>
	.icon-down{
		font-size: 50rpx;
	}
	.uni-textarea textarea{
		padding: 36rpx;
	}
	
	.pp-image {
		width: 300rpx;
		height: 300rpx;
		margin: 10rpx auto;
		display: block;
		
	}
	.pp-warp {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		width: 600rpx;
		height: 500rpx;
	}
	
	.pp-button{
		background-color: #ffe934;
		color: #171606;
	}
	
</style>
